<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue.js"></script>
</head>
<body>

<div id="app">

    <ul>
        <li v-for="item,index in users" v-text="item"></li>

    </ul>

    <ul>
        <li v-for="(item,index) in users">{{item}}-{{index}}</li>

    </ul>

    <ul>
        <li v-for="(value,key,index) in name">{{key}}-{{value}}:{{index}}</li>

    </ul>


    <ul v-if="student.length">
        <li v-for="item in student">{{item}}</li>
    </ul>

    <div v-if="!student.length">暂无数据</div>


    <ul v-if="student.length">
        <li v-for="item in student">{{item}}</li>
    </ul>


    <ul v-else-if="true">
        <li>走到这里</li>
    </ul>

    <div v-else>暂无数据</div>

    <!--v-show 元素还是渲染的-->
    <!--v-if 元素没有渲染-->

</div>


<script>

    /**
     *
     *
     */

    let obj={

        name:'lvpeng',

        age:18
    }

    let vm=new Vue({

        el:'#app',

        data:{

            users:['a','b','c'],

            name:obj,

            student:['lv','pei','love']
        }
    });
</script>


</body>
</html>